<template>
  <div class="articleitem-container">
    <el-card class="box-card" v-for="(item, index) in articleInfo" :key="index" shadow="hover">
      <div slot="header" class="clearfix">
        <span>{{ item.title }}</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="toArticlePage(item._id)">详情</el-button>
      </div>
      <div class="text item">作者：{{ item.author }}</div>
      <div class="text item">
        标签： <el-tag v-for="(item_tag, index) in item.tag" :key="index" size="small" class="el_tag">{{ item_tag.tag_name }}</el-tag>
      </div>
      <div class="text item">
        发表于：{{ item.created_time }}
        <el-divider direction="vertical"></el-divider>
        更新于：{{ item.last_modified_time }}
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'ArticleItem',
  props: ['tabId', 'tabName', 'articleInfo'],
  data () {
    return {
      tab_id: '',
      articleInfos: []
    }
  },
  methods: {
    toArticlePage (val) {
      // console.log(val)
      this.$router.push('/blog/article/' + val)
    }
  },
  created () {},
  watch: {
    // articleInfo: function (newVal, oldVal) {
    //   this.articleInfos = newVal
    //   for (let i = 0; i < this.articleInfos.length; i++) {
    //     this.articleInfos[i].created_time = this.$forMat(this.articleInfos[i].created_time)
    //     this.articleInfos[i].last_modified_time = this.$forMat(this.articleInfos[i].last_modified_time)
    //   }
    // }
  }
}
</script>

<style lang="less" scoped>
.main-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: flex-start;
  // height: 100%;
  // background-color: #fff;
  // box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  // padding: 10px;
}

.fa-card {
  width: 100%;
  display: flex;
  justify-content: center;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}
.clearfix:after {
  clear: both;
}

.box-card {
  // width: 700px;
  margin-bottom: 20px;
}
.el_tag {
  margin-right: 5px;
}
</style>
